<template>
  <div class="box">
    <NavBar title="宠主评价" />
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="usersCase" v-for="item in petCommentList" :key="item.id">
        <img src="https://m.moguvet.com/_nuxt/img/5786c21.png" alt="" />
        <div class="userCasecontent">
          <p>
            {{ item.user.nickname }}
            <van-rate
              v-model="item.star_tag"
              :size="15"
              color="#ffd21e"
              void-icon="star"
              void-color="#eee"
            />
          </p>
          <p>
            <span>{{ item.content }}</span>
          </p>
          <p>{{ item.created_at }}</p>
        </div>
      </div>
    </van-list>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useCount } from "../../store/index";
let store = useCount();
import { useRoute, onBeforeRouteUpdate } from "vue-router";
let route = useRoute();
import NavBar from "../../components/NavBar.vue";
import { getComments } from "../../API";

let loading = ref(true);
let finished = ref(false);
let page = 1;
let limit = 10;

let user_id = ref("");
user_id.value = route.query.user_id;

// 宠主评价接口
let petCommentList = ref([]);
let getPetComments = async () => {
  let { data } = await getComments({
    user_id: store.params.user_id,
    page,
    limit,
  });
  petCommentList.value.push(...data.data.list);
  // console.log(petCommentList.value);
  loading.value = false;
  // 数据全部加载完成
  finished.value = !data.data.list.length;
};
getPetComments();

// 初始化请求函数
let initRequest = () => {
  page = 1;
  getPetComments();
};
// 解决路由缓存问题;
onBeforeRouteUpdate(() => {
  initRequest();
});

let onLoad = () => {
  page++;
  getPetComments();
};
</script>
<style scoped>
.box {
  padding: 0 30px;
}
.usersCase {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #efefef;
  padding: 60px 0;
}
.usersCase img {
  width: 50px;
  height: 50px;
  margin-right: 30px;
}
.userCasecontent {
  width: 100%;
  display: flex;
  flex-direction: column;
  font-size: 32px;
}
.userCasecontent p:nth-of-type(1) {
  display: flex;
  justify-content: space-between;
}
.userCasecontent p:nth-of-type(2) {
  width: 100%;
  padding: 30px 40px;
  margin: 25px 0;
  background-color: #fafafa;
  box-sizing: border-box;
  font-size: 28px;
  color: #8e8e8e;
  border-radius: 20px;
}
.userCasecontent p:nth-of-type(2) span {
  overflow: hidden; /* 隐藏超出高度的内容 */
  display: -webkit-box; /* 将段落视为弹性伸缩盒子 */
  -webkit-line-clamp: 3; /* 设置最大显示行数为2行 */
  -webkit-box-orient: vertical; /* 设置伸缩盒子的排列方向为垂直 */
  text-overflow: ellipsis; /* 显示省略号 */
}
.userCasecontent p:nth-of-type(3) {
  color: #d3d3d3;
  font-size: 24px;
}
</style>